import { Component } from 'react';
import ReactDOM from 'react-dom/client';

/* 
  🔔React核心理念-状态不可变
      若不遵守核核心理念，最终会导致 React 无法侦听到对象变化
*/
class App extends Component {
  state = {
    count: 1,
    logs: [1, 2, 3],
  };

  // 使用箭头函数，声明时就绑定 this 指向
  addBtn = () => {
    // 在 count 值的基础上加 1
    this.setState({
      count: this.state.count + 1,
    });
  };

  addLogs = () => {
    // 🚨 push() 直接更新了原数组，没有产生新数据内存地址，最终会导致 React 无法侦听到对象变化
    // this.state.logs.push()   // ❌ 常见非标准写法

    // ✅正确写法：状态不可变 (用新的状态覆盖旧状态)
    this.setState({
      logs: [...this.state.logs, Date.now()],
    });
  };

  render() {
    return (
      <div>
        <span>{this.state.count}</span>
        <button onClick={this.addBtn}>+</button>
        <ul>
          {this.state.logs.map((item) => (
            <li key={item}>{item}</li>
          ))}
        </ul>
        <button onClick={this.addLogs}>点击添加时间戳</button>
      </div>
    );
  }
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);
